<template>
  <section class="case-container">
    <div class="img-box"></div>
    <div class="case-holder">
      <div class="case-overview">
        <div class="overview__title">
          <div class="overview__title--holder">
            <div class="overview__title--box">
              <h4>成功案例</h4>
              <div class="line"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <section class="case-index">
      <div class="case-index-item" v-for="(item,key) in list">
        <div class="case-index-item-img">
          <img :src="item.img" alt="">
        </div>
        <div class="case_index_item_txt" :class="{'bg': key === value}">
          <span>{{item.name}}</span>
        </div>
        <div class="case-index-box">
          <div class="case-index-box-txt">
            <h4>{{item.title}}</h4>
            <div class="case-index-box-title">
              <p>{{item.txt}}</p>
            </div>
          </div>
          <div class="case-index-box-btn"
               :class="{'bg2':key === value}"
               @mouseenter="onMouseenter(key)"
               @mouseleave="onMouseleave"
               @click="goCaseDetail(item.key)">
            <span>查看详情</span>
          </div>
        </div>
      </div>
    </section>
  </section>
</template>

<script>
  export default {
    layout: 'layout',
    data() {
      return {
        list: [{
          img: require('../../static/case-sec-02.png'),
          name: "晨瑞汽车",
          key: 'hzcr',
          title: "平台为晨瑞汽车提供整套服务体系",
          txt: "杭州晨瑞汽车服务有限公司，是一家集 销售、租赁、运维为一体的新能源..."
        },
          {
            img: require('../../static/case-sec-03.png'),
            name: "浙江众卓",
            key: 'zjzz',
            title: "众卓采用内部管理系统和橙配",
            txt: "浙江众卓新能源科技有限公司是专注于服务行业的公司，主要经营锂电池..."
          },
          {
            img: require('../../static/case-sec-04.png'),
            name: "福建传隆",
            key: 'fjcl',
            title: "平台为晨瑞汽车提供整套服务体系",
            txt: "福建传隆新能源科技有限公司主要经营新能源技术的开发与研究;充电桩的..."
          }],
        value: "999"
      }
    },

    methods: {
      onMouseenter(key) {
        this.value = key
      },
      onMouseleave() {
        this.value = "999"
      },
      goCaseDetail(name) {
        this.$router.push('/case/' + name)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .case-container {
    .img-box {
      height:600px;
      background: url("../../assets/img/case/case-sec-01.png") no-repeat center center ;
      background-size: cover;
    }

    .case-holder {
      width: 1200px;
      margin: 0 auto;
      .case-overview {
        padding: 0 10px;
        .overview__title {
          overflow: hidden;
          .overview__title--holder {
            float: left;
            position: relative;
            left: 50%;
            clear: both;
            .overview__title--box {
              position: relative;
              left: -50%;
              padding: 43px 0;
              h4 {
                font-size: 30px;
                line-height: 30px;
                color: #010101;
                font-weight: normal;
                letter-spacing: 2px;
              }
              .line {
                margin-top: 6px;
                margin-left: 2px;
                width: 64px;
                height: 2px;
                background-color: #FF8A01;
              }
            }
          }
        }

        .overview__content {
          background-color: rgb(255, 255, 255);
          box-shadow: 0 0 5px rgba(255, 138, 1, 0.14);
          ul {
            font-size: 0;
            padding-top: 32px;
            li {
              display: inline-block;
              width: 250px;
              height: 60px;
              line-height: 60px;
              text-align: center;
              font-size: 20px;
              color: #000000;
              font-weight: 500;
              border-radius: 10px;
              background-color: rgb(235, 235, 235);
              margin-left: 37px;
              margin-bottom: 32px;
              cursor: pointer;
              &.selected {
                background-color: #FF8A01;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
    .case-index {
      width: 1200px;
      margin: 0 auto 100px auto;
      padding: 0 10px 0 9px;
      .case-index-item {
        width: 355px;
        display: inline-block;
        position: relative;
        margin-right: 58px;
        &:last-child {
          margin-right: 0;
        }
        .case-index-item-img {
          width: 100%;
          height: 200px;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .case_index_item_txt {
          width: 100px;
          height: 100px;
          position: absolute;
          top: 150px;
          left: 130px;
          border-radius: 50%;
          background: white;
          text-align: center;
          line-height: 100px;

          span {
            font-size: 20px;
            font-weight: 600;
            color: #FF8A01;
          }
        }
        .bg {
          background: #FF8A01;
          border:1px solid #FF8A01;
          span {
            color: #ffffff;
          }

        }
        .case-index-box {
          width: 100%;
          padding-top: 80px;
          background: #eee;
          padding-bottom: 30px;
          .case-index-box-txt {
            text-align: center;
            h4 {
              font-weight: 400;
              font-size: 20px;
            }
            .case-index-box-title {
              width: 280px;
              margin: 0 auto;
              padding: 30px 0;
              text-align: left;
              p {
                line-height: 30px;
              }
            }
          }
          .case-index-box-btn {
            width: 160px;
            height: 40px;
            border: 1px solid black;
            margin: 0 auto;
            margin-top: 30px;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
          }
          .bg2 {
            background: #FF8A01;
            border:1px solid #FF8A01;
            span {
              color: #fff;
            }
          }
        }

      }
      .middle {
        margin: 0 24px;
      }
    }
  }
</style>
